import React, { useRef, useState, useEffect } from 'react'
import { StyleSheet, Text, View, Button, ImageBackground, Animated, FlatList, PanResponder, TouchableWithoutFeedback } from 'react-native'
import Avatar from '../../../components/avatar/Avatar'
import Drawer from '../../../components/me/Drawer';
import ViewPager from '@react-native-community/viewpager'
import TextButton from '../../../components/button/TextButton';
import IconButton from '../../../components/button/IconButton'
import Icon from 'react-native-vector-icons/MaterialIcons'

// 引入 context
import OpenDrawerContext from '../../../context/OpenDrawerContext'

// 模拟的数据
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const Me = () => {

    const openDrawer = React.useContext(OpenDrawerContext)

    // 滑动框的引用
    const viewRef = useRef();

    // 当前被选中的框的下标
    const [activeIndex, setActiveIndex] = useState(0)

    // 定义动画变量
    const [move] = useState(new Animated.Value(0))

    const [movePan, setMovePan] = useState({})


    // 监听当前下标，只要下标改变就执行动画
    useEffect(() => {

        Animated.timing(move, {
            toValue: activeIndex, // 把线
            duration: 100,
            useNativeDriver: false,
        }).start();

        // 左滑显示右侧导航
        let pan = PanResponder.create({
            // 要求成为响应者：
            // 开启手势滑动功能
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            // onMoveShouldSetPanResponder: (evt, gestureState) => true,

            // 不需要获取其他点击等事件
            // onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            // onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            // 滑动结束时触发
            // gestureState.dx : 结束的坐标 - 开始的坐标 （整数：向右滑动的距离， 负数： 向左滑动的距离）
            // gestureState.dy : 结束的坐标 - 开始的坐标 （整数：向下滑动的距离， 负数： 向上滑动的距离）
            onPanResponderMove: (evt, gestureState) => {
                // console.log(gestureState);
                if (gestureState.dx <= -80) {
                    // 执行动画
                    openDrawer();
                }

            },
        });

        setMovePan(pan);
    }, [activeIndex, move])

    return (
        <View style={{ flex: 1, backgroundColor: '#161721' }}>
            <View {...movePan.panHandlers} >
                {/* 顶部背景图 */}
                <ImageBackground
                    style={{
                        width: '100%',
                        height: 180,
                    }}
                    source={{
                        uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588648423661&di=fe53fe107eea7c6af1e8282ffbded8e9&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc2aedbbd216d58453c1b8e0176714cee0d9b5fa11a61c-O1FhqH_fw658'
                    }}
                />

                {/* 头像 */}
                <View
                    style={{
                        flexDirection: 'row',
                        paddingLeft: 5,
                        paddingRight: 5,
                    }}>

                    <View style={{
                        top: -20
                    }}>
                        <Avatar
                            border={5}
                            size="big"
                            uri="https://portrait.gitee.com/uploads/avatars/user/1593/4779677_King-XiYu_1578974235.png!avatar100"
                        />
                    </View>

                    <Text style={[styles.textBtn, { flex: 1 }]}>编辑资料</Text>
                    <Text style={styles.textBtn}>+好友</Text>

                </View>

                <View
                    style={{
                        paddingLeft: 5,
                        paddingRight: 5,
                    }} >
                    <Text style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}>咕咚先生</Text>
                    <Text style={{ color: 'white', }}>抖音号：1572868220</Text>

                    <View style={{
                        marginTop: 8,
                        borderTopColor: '#2b2c36',
                        borderTopWidth: 1,
                        borderBottomColor: '#2b2c36',
                        borderBottomWidth: 1,
                        marginBottom: 8,
                    }}>
                        <GoodsItem color="#f4cf4c" icon="shop-two" title="商品橱窗" />
                    </View>

                    <Text style={{ color: 'white' }}>专注高保真原型交互设计</Text>

                    {/* 标签 */}
                    <View style={{
                        marginTop: 8,
                        marginBottom: 8,
                        flexDirection: 'row',
                    }}>
                        <Tags tagTxt="全州" />
                        <Tags tagTxt="+增加性别、学校等标签" />
                    </View>

                    {/* 获赞 关注 粉丝 */}
                    <View style={{
                        marginTop: 1,
                        marginBottom: 18,
                        flexDirection: 'row',
                    }}>
                        <NumText number="21" text="获赞" />
                        <NumText number="34" text="关注" />
                        <NumText number="14" text="粉丝" />
                    </View>
                </View>
            </View>

            {/* 三列切换： 作品、动态、喜欢 */}
            <View style={{
                flexDirection: 'row',
            }}>
                <TextButton title="作品"
                    style={[
                        styles.viewBtns,
                        activeIndex === 0 ? styles.viewerBtnsActive : '',
                    ]}
                    onPress={() => {
                        // 切换到第一个框
                        viewRef.current.setPage(0);
                        setActiveIndex(0);
                    }} />
                <TextButton
                    title="动态"
                    style={[
                        styles.viewBtns,
                        activeIndex === 1 ? styles.viewerBtnsActive : '',
                    ]}
                    onPress={() => {
                        // 切换到第二个框
                        viewRef.current.setPage(1);
                        setActiveIndex(1);
                    }} />
                <TextButton
                    title="喜欢"
                    style={[
                        styles.viewBtns,
                        activeIndex === 2 ? styles.viewerBtnsActive : '',
                    ]}
                    onPress={() => {
                        // 切换到第三个框
                        viewRef.current.setPage(2);
                        setActiveIndex(2);
                    }} />

                {/* 黄线 */}
                <Animated.View
                    style={{
                        backgroundColor: '#f4cf4c',
                        height: 2,
                        width: '33.333333%',
                        position: 'absolute',
                        bottom: 0,
                        left: move.interpolate({
                            inputRange: [0, 1, 2],
                            outputRange: ['0%', '33.3333%', '66.6666%'],
                        }),
                    }}>

                </Animated.View>
            </View>

            <ViewPager
                onPageSelected={(e) => {
                    setActiveIndex(e.nativeEvent.position)
                }}
                ref={viewRef}
                initialPage={0}
                style={{
                    flex: 1,
                    backgroundColor: 'gray',
                }}
            >
                <View key="works">
                    <FlatList
                        data={data}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={() => {
                            return (
                                <ImageBackground
                                    style={{
                                        flex: 1,
                                        height: 200,
                                        width: '100%',
                                    }}
                                    source={{
                                        uri: 'http://ww1.sinaimg.cn/large/007WurYGgy1gf2ur5byi8j304y08y0wi.jpg'
                                    }}
                                >
                                    <View style={{ position: 'absolute', bottom: 0, left: 10 }}>
                                        <GoodsItem color="white" icon="airplay" title="61" />
                                    </View>
                                </ImageBackground>
                            )
                        }}
                        numColumns={3}
                    />
                </View>
                <View key="news">
                    <Text>动态</Text>
                </View>
                <View key="like">
                    <Text>喜欢</Text>
                </View>
            </ViewPager>

            <View
                style={{
                    position: 'absolute',
                    top: 50,
                    right: 20,
                    backgroundColor: 'black',
                    borderRadius: 16,
                    padding: 4,
                }}>
                <IconButton
                    name="apps"
                    color="white"
                    size={25}
                    onPress={() => {
                        openDrawer();
                    }} />
            </View>

        </View>
    )
}

function GoodsItem({ icon, title, color }) {
    return (
        // <TouchableWithoutFeedback onPress={onPress}>
        <View style={styles.GoodsItem}>
            <Icon color={color} name={icon} size={14} />
            <Text style={{
                color,
                marginLeft: 5,
            }}>
                {title}
            </Text>
        </View>
        // </TouchableWithoutFeedback>
    )
}

// 标签Txt
function Tags({ tagTxt }) {
    return (
        <View style={{
            marginRight: 8
        }}>
            <Text style={styles.TagsTxt}>{tagTxt}</Text>
        </View>
    )
}

// 获赞 关注 粉丝
function NumText({ number, text }) {
    return (
        <View style={{
            flexDirection: 'row',
            marginRight: 10
        }}>
            <Text style={{
                color: 'white',
                fontWeight: 'bold',
                fontSize: 16,
            }}>{number}</Text>
            <Text style={{
                color: '#999999',
                fontSize: 16,
            }}>{text}</Text>
        </View>
    )
}

export default Me

const styles = StyleSheet.create({
    textBtn: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
        backgroundColor: '#666',
        textAlign: 'center',
        textAlignVertical: 'center',
        marginLeft: 10,
        height: 50,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 3,
        marginTop: 10,
    },
    viewBtns: {
        color: 'gray',
        fontSize: 16,
        flex: 1,
        textAlign: 'center',
        paddingBottom: 10,
    },
    viewerBtnsActive: {
        fontWeight: 'bold',
        color: 'white',
    },
    GoodsItem: {
        flexDirection: 'row',
        paddingTop: 5,
        paddingBottom: 5,
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    TagsTxt: {
        color: '#999999',
        backgroundColor: '#24262f',
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 3,
    }
})
